<template>
  <div class="article-comment">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item.com_id">
        <div class="cmt-item">
          <div class="cmt-left">
            <!-- 图片 -->
            <van-image round fit="cover" :src="item.aut_photo" />
            <!-- 文字信息 -->
            <div class="cmt-info">
              <div class="name">{{ item.aut_name }}</div>
              <div class="content">{{ item.content }}</div>
              <div class="time-box">
                <span class="time">{{ item.pubdate | relvTime }}</span>
                <van-button plain size="mini" @click="showReply(item)"
                  >回复({{ item.reply_count }})</van-button
                >
              </div>
            </div>
          </div>
          <div class="cmt-right">
            <!-- 图标 -->
            <van-icon name="like-o" />
          </div>
        </div>
      </van-cell>
    </van-list>
    <div class="cmt-box">
      <van-field
        @keyup.enter="send"
        v-model="cmt"
        center
        clearable
        placeholder="请输入评论"
      >
        <template #button>
          <van-button @click="send" size="small" type="info">发布</van-button>
        </template>
      </van-field>
    </div>
    <!-- 回复面板 -->
    <van-action-sheet v-model="replyShow" title="回复列表">
      <MyReply
        :key="currentItem.com_id"
        :item="currentItem"
        @reply="currentItem.reply_count++"
      />
    </van-action-sheet>
  </div>
</template>

<script>
import { cmtListAPI, sendCmtAPI } from '@/api/comment'
import MyReply from './MyReply.vue'
export default {
  components: {
    MyReply
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      cmt: '',
      offset: null,
      replyShow: false,
      currentItem: {}
    }
  },
  methods: {
    showReply (item) {
      this.currentItem = item
      this.replyShow = true
    },
    async send () {
      if (this.cmt === '') return this.$toast('请输入评论内容')
      // 不为空就发请求
      const res = await sendCmtAPI({
        target: this.$route.params.id,
        content: this.cmt
      })

      this.list.unshift(res.data.new_obj)
      this.cmt = ''
      this.$toast.success('发表成功')
    },
    async onLoad () {
      const res = await cmtListAPI({
        type: 'a',
        source: this.$route.params.id,
        offset: this.offset,
        limit: 10
      })
      this.offset = res.data.last_id
      // console.log('cmt...', res)
      // 数据要越刷越多，所以用push,用赋值=会覆盖
      this.list.push(...res.data.results)
      this.loading = false
      // 判断是否全部加载完毕
      if (this.list.length >= res.data.total_count) {
        this.finished = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
.article-comment {
  padding-bottom: 50px;
  .cmt-box {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }
  .cmt-item {
    display: flex;
    justify-content: space-between;
    .cmt-left {
      display: flex;
      .van-image {
        width: 40px;
        height: 40px;
      }
      .cmt-info {
        margin-left: 10px;
        .name {
          color: #466baa;
        }
        .time-box {
          .time {
            color: gray;
          }
        }
        .van-button {
          vertical-align: middle;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
